import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { ListRowState } from "../../types";
import { CartO, ChatO, ShopO } from "@react-vant/icons";
import { ActionBar } from "react-vant";
import { useDispatch, useSelector } from "react-redux";
import { addCarActionCreator } from "../../store/car/carReducer";
import { RootState } from "../../store";
import { useCar } from "../../hooks/useCar";

const Index: React.FC = () => {
  const location = useLocation();
  const state = location.state as ListRowState;
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { totalCount } = useCar()
  return (
    <div>
      <div>
        <img src={state.image} width="100%" alt="" />
        <h2>{state.title}</h2>
        <p>{state.word}</p>
        <p>{state.price}</p>
      </div>
      <ActionBar>
        <ActionBar.Icon
          icon={<ChatO />}
          text="客服"
          onClick={() => console.log("chat click")}
        />
        <ActionBar.Icon
          badge={{ content: totalCount || '' }}
          icon={<CartO />}
          text="购物车"
          onClick={() => navigate("/car")}
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text="店铺"
          onClick={() => console.log("shop click")}
        />
        <ActionBar.Button
          type="danger"
          text="立即购买"
          onClick={() => dispatch(addCarActionCreator(state))}
        />
      </ActionBar>
    </div>
  );
};

export default Index;
